<!-- src/views/RegisterView.vue -->
<template>
    <div class="min-h-screen bg-gray-100 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
      <div class="sm:mx-auto sm:w-full sm:max-w-md">
        <h2 class="mt-6 text-center text-3xl font-extrabold text-gray-900">
          注册新账户
        </h2>
        <p class="mt-2 text-center text-sm text-gray-600">
          已经有账户？ <router-link to="/login" class="font-medium text-primary hover:text-primary-dark">立即登录</router-link>
        </p>
      </div>
  
      <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
        <div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
          <form @submit.prevent="handleRegister" class="space-y-6">
            <div>
              <label for="name" class="block text-sm font-medium text-gray-700">
                姓名
              </label>
              <div class="mt-1">
                <input
                  v-model="name"
                  type="text"
                  id="name"
                  class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm"
                  placeholder="请输入姓名"
                  :class="{ 'border-red-500': errors.name }"
                />
                <p v-if="errors.name" class="mt-2 text-sm text-red-600">{{ errors.name }}</p>
              </div>
            </div>
  
            <div>
              <label for="email" class="block text-sm font-medium text-gray-700">
                邮箱地址
              </label>
              <div class="mt-1">
                <input
                  v-model="email"
                  type="email"
                  id="email"
                  class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm"
                  placeholder="example@example.com"
                  :class="{ 'border-red-500': errors.email }"
                />
                <p v-if="errors.email" class="mt-2 text-sm text-red-600">{{ errors.email }}</p>
              </div>
            </div>
  
            <div>
              <label for="password" class="block text-sm font-medium text-gray-700">
                密码（至少8位，包含字母和数字）
              </label>
              <div class="mt-1">
                <input
                  v-model="password"
                  type="password"
                  id="password"
                  class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm"
                  :class="{ 'border-red-500': errors.password }"
                />
                <p v-if="errors.password" class="mt-2 text-sm text-red-600">{{ errors.password }}</p>
              </div>
            </div>
  
            <div>
              <label for="confirmPassword" class="block text-sm font-medium text-gray-700">
                确认密码
              </label>
              <div class="mt-1">
                <input
                  v-model="confirmPassword"
                  type="password"
                  id="confirmPassword"
                  class="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-primary focus:border-primary sm:text-sm"
                  :class="{ 'border-red-500': errors.confirmPassword }"
                />
                <p v-if="errors.confirmPassword" class="mt-2 text-sm text-red-600">{{ errors.confirmPassword }}</p>
              </div>
            </div>
  
            <div>
              <button
                :disabled="loading"
                class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-primary hover:bg-primary-dark focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary"
              >
                {{ loading ? '正在注册...' : '注册' }}
              </button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { ref, watch } from 'vue'
  import { useStore } from 'vuex'
  import { useRouter } from 'vue-router'
  
  export default {
    setup() {
      const store = useStore()
      const router = useRouter()
      const name = ref('')
      const email = ref('')
      const password = ref('')
      const confirmPassword = ref('')
      const errors = ref({
        name: null,
        email: null,
        password: null,
        confirmPassword: null
      })
      const loading = ref(false)
  
      watch([name, email, password, confirmPassword], () => {
        const newErrors = {
          name: !name.value ? '请输入姓名' : null,
          email: !email.value ? '请输入邮箱' : !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email.value) ? '邮箱格式不正确' : null,
          password: !password.value || password.value.length < 8 || !/[A-Za-z0-9]/.test(password.value) ? '密码需至少8位并包含字母数字' : null,
          confirmPassword: password.value !== confirmPassword.value ? '密码不一致' : null
        }
        
        errors.value = newErrors
      }, { immediate: true })
  
      const handleRegister = async () => {
        if (Object.values(errors.value).some(err => err)) return
  
        loading.value = true
        try {
          await store.dispatch('register', {
            name: name.value,
            email: email.value,
            password: password.value
          })
          // 注册成功后自动登录并跳转
          router.push('/login')
        } catch (error) {
          errors.value.server = error.message
        } finally {
          loading.value = false
        }
      }
  
      return {
        name,
        email,
        password,
        confirmPassword,
        errors,
        loading,
        handleRegister
      }
    }
  }
  </script>